<template>
	<view class="main-content" v-if="isShow">
		<!-- 签字canvas -->
		<block v-if="showCanvas">
			<canvas class="mycanvas" id="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
				@touchend="touchend" disable-scroll="true"></canvas>
			<!-- 旋转canvas -->

		</block>
		<block class="" v-else>
			<image :src="imgurl" mode="" class="sign-img"></image>
		</block>
		<canvas class="rotatCanvas" id="rotatCanvas"
			:style="{ 'z-index': -1, width: `${screenWidth}px`, height: `${(screenWidth * screenWidth) / screenHeight}px` }"
			canvas-id="rotatCanvas"></canvas>
		<view class="button-line">
			<view class="save-button" @tap.stop="finish">保存</view>
			<view class="clear-button" @tap.stop="clear">清除</view>
			<view class="cancel-button" @tap.stop="hide">关闭</view>
		</view>
		<view class="mask" v-if="showModal" @tap.stop>
			<view class="kw-modal flex align-items-center justify-content-center">
				<view class="kw-modal-content">
					<view class="flex justify-content-end font-size-34 lightgray">
						<text class="iconfont icon-guanbi" @tap="close"></text>
					</view>
					<view class="flex justify-content-center font-size-38 font-600 kw-modal-title">
						{{title}}
					</view>
					<view class="kw-modal-btnbox flex justify-content-between">
						<view @tap="cancel" class="kw-modal-btn">{{cancelText}}</view>
						<view @tap="confirm" class="kw-modal-btn">{{confirmText}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if="showToast">
			<view class="sign-toast flex align-items-center justify-content-center">
				<view class="toast-box">请先签名</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				ctx: '', //绘图图像
				points: [], //路径点集合
				screenWidth: '',
				screenHeight: '',
				isRotatShow: false,
				showModal: false,
				showToast: false,
				startX: '',
				startY: '',
				moveX: '',
				moveY: '',
				imgurl: '',
				showCanvas: true,
				title: '提示框',
				cancelText: '取消',
				confirmText: '确认',
			};
		},
		props: {
			isShow: {
				type: Boolean,
				default: true
			}
		},
		mounted() {
			this.createCanvas();
			uni.getSystemInfo({
				success: e => {
					this.screenWidth = e.screenWidth;
					this.screenHeight = e.screenHeight - 110;
					console.log(e, 'e')
				}
			});
		},
		methods: {
			show() {
				this.clear();
				this.isShow = true;
			},
			hide() {
				this.$emit('close', false)
				this.showCanvas = true
			},
			close() {
				this.showCanvas = true
				this.showModal = false
			},
			//取消保存
			cancel() {
				this.close()
				//清除画布
				this.clear()
			},
			confirm() {
				this.rotat(this.imgurl);
			},
			save() {
				this.showCanvas = false
				console.log(this.moveX, 'moveX')
				console.log(this.moveY, 'moveY')
				if (!this.moveX && !this.moveY) {
					this.showToast = true
					setTimeout(() => {
						this.showToast = false
						this.showCanvas = true
					}, 1500)
					return false
				}
				this.showModal = true
				this.title = '确认签字？一旦确认，不能修改'
			},
			//创建并显示画布
			createCanvas() {
				this.showCanvas = true;
				this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
				//设置画笔样式
				this.ctx.lineWidth = 5;
				this.ctx.lineCap = 'round';
				this.ctx.lineJoin = 'round';
			},
			//触摸开始，获取到起点
			touchstart(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove(e) {
				this.moveX = e.changedTouches[0].x;
				this.moveX = e.changedTouches[0].y;
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend() {
				this.points = [];
			},
			draw() {
				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.ctx.moveTo(point1.X, point1.Y);
				this.ctx.lineTo(point2.X, point2.Y);
				this.ctx.stroke();
				this.ctx.draw(true);
			},
			//清空画布
			clear() {
				this.ctx.clearRect(0, 0, this.screenWidth, this.screenHeight);
				this.ctx.draw(true);
				this.moveX = '';
				this.moveY = '';
				this.showCanvas = true
			},
			//完成绘画并保存到本地
			finish() {
				uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: res => {
							this.imgurl = res.tempFilePath
							this.confirm()

							// this.showModal = true
						},
						complete: com => {}
					},
					this
				);
			},
			// 将图片选装
			rotat(e) {
				// this.isRotatShow = true
				// this.showCanvas = true
				let rotatCtx = uni.createCanvasContext('rotatCanvas', this); //创建绘图对象
				// 重新定位中心点
				rotatCtx.translate(0, (this.screenWidth * this.screenWidth) / this.screenHeight);
				// rotatCtx.translate(0, 0);
				// 将画布逆时针旋转90度
				rotatCtx.rotate((270 * Math.PI) / 180);
				// 将签字图片绘制进入Canvas
				rotatCtx.drawImage(e, 0, 0, (this.screenWidth * this.screenWidth) / this.screenHeight, this.screenWidth);
				// 保存后旋转后的结果
				rotatCtx.draw(true);
				setTimeout(() => {
					// 生成图片并回调
					uni.canvasToTempFilePath({
							canvasId: 'rotatCanvas',
							success: val => {
								// console.log('tempFilePath', val.tempFilePath)
								// this.showCanvas = false
								// this.hide();
								this.$emit('savesign', {
									tempFilePath: val.tempFilePath,
									flag: true
								});
								setTimeout(() => {
									this.hide();
								}, 500);
							},
							complete: com => {
								// console.log(com);
							}
						},
						this
					);
				},100);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.main-content {
		width: 100vw;
		height: 100vh;
		background-color: #ffffff;
		z-index: 999999;
		overflow: hidden;
		max-height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}

	.mycanvas {
		width: 100vw;
		height: calc(100vh - 140px);
		// height: 100vh;
		background-color: #efefef;
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		z-index: 2;
	}

	.sign-img {
		width: 100vw;
		height: calc(100vh - 110px);
	}

	.rotatCanvas {
		background-color: red;
	}

	.button-line {
		transform: rotate(90deg);
		position: fixed;
		bottom: -130rpx;
		left: 260rpx;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}

	.button-style {
		color: #ffffff;
		width: 100px;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
		font-size: 34rpx
	}

	.save-button {
		@extend .button-style;
		background-color: #02b340;
		height: 140rpx;
		line-height: 140rpx;
	}

	.clear-button {
		@extend .button-style;
		background-color: #ffa500;
		height: 140rpx;
		line-height: 140rpx;
	}

	.cancel-button {
		@extend .button-style;
		background-color: #e10b2b;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.kw-modal,
	.sign-toast {
		// width: 50vw;
		// height: calc(100vh - 210px);
		transform: rotate(0deg);
		// position: absolute;
		// top: 0;
		// left: 0;
		text-align: center;
		z-index: 999;
	}

	.kw-modal-content {
		width: 690rpx;
		// height: 400rpx;
		background: #efefef;
		border-radius: 30rpx;
		padding: 38rpx 30rpx 70rpx;

		.kw-modal-title {
			margin-top: 22rpx;
		}

		.kw-modal-tips {
			margin-top: 20rpx;
		}

		.kw-modal-inp {
			margin-top: 50rpx;

			.kw-inp {
				border: 1rpx solid #D9D9D9;
				border-radius: 4rpx;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 30rpx;
			}

			.inp-title {
				margin-right: 20rpx;
			}
		}

		.kw-modal-btnbox {
			margin-top: 100rpx;
			display: flex;
			justify-content: space-around;

			.kw-modal-btn {
				width: 300rpx;
				height: 84rpx;
				background: #D9D9D9;
				border-radius: 60rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 30rpx;

				&:last-child {
					color: #FFFFFF;
					background: #59A3FF;
				}
			}
		}
	}

	.toast-box {
		padding: 15rpx 30rpx;
		// background-color: rgba(0, 0, 0, .7);
		// color: #fff;
		background-color: #ffffff;
		color: #ffa500;
		border-radius: 8rpx;
		font-size: 30rpx;
	}
</style>